<template>
	<scroll-view class="flex-col page mine" scroll-y @scroll="onPageScroll">
		<view class="flex-col section" :style="{ paddingTop: navHeight + 'px' }">
			<xlm-top-nav :scrollTop="scrollTop" :leftIconColor="'#fff'" :titleColor="'#fff'" :textAlign="'center'"
				title="记录" :showGoBack="false" />
			<view class="record-ranking-page">
				<!-- 顶部Tab -->
				<view class="tabs">
					<view v-for="(tab, idx) in tabs" :key="tab" :class="['tab']" @click="goTab(tab, idx)">{{
            tab.name
          }}</view>
				</view>

				<!-- 榜单内容（可多组）-->
				<view v-for="(group, gidx) in groups" :key="gidx" class="ranking-group">
					<!-- 项目选择 -->
					<view class="event-bar" @click="goEvent(group.item_id)">
						<text class="mt-15">{{ group.item_name }}</text>
						<image class="arrow" :src="imgUrl + 'arrow-right-hign-light@2x.png'" />
					</view>
					<!-- 领奖台 -->
					<view class="podium">
						<!-- 第二名 -->
						<view class="podium-item second" v-if="group.paiming[1]">
							<view class="avatar-ring-second">
								<image class="avatar" :src="group.paiming[1].avatar||imgUrl + 'avatar1@2x.png'" />
							</view>
							<view class="name">{{ group.paiming[1].username }}</view>
							<view class="score">{{ group.paiming[1].score }}</view>
							<view class="date">{{ formatDateOnly(group.paiming[1].createtime) }}</view>
						</view>
						<!-- 第一名 -->
						<view class="podium-item first" v-if="group.paiming[0]">
							<view class="avatar-ring-first">
								<image class="avatar" :src="group.paiming[0].avatar||imgUrl + 'avatar1@2x.png'" />
							</view>
							<view class="name">{{ group.paiming[0].username }}</view>
							<view class="score">{{ group.paiming[0].score }}</view>
							<view class="date">{{ formatDateOnly(group.paiming[0].createtime) }}</view>
						</view>
						<!-- 第三名 -->
						<view class="podium-item third" v-if="group.paiming[2]">
							<view class="avatar-ring-third">
								<image class="avatar" :src="group.paiming[2].avatar||imgUrl + 'avatar1@2x.png'" />
							</view>
							<view class="name">{{ group.paiming[2].username }}</view>
							<view class="score">{{ group.paiming[2].score }}</view>
							<view class="date">{{ formatDateOnly(group.paiming[2].createtime) }}</view>
						</view>
						<!-- 领奖台底座 -->
						<image class="podium-bg" :src="imgUrl + 'podium-bg.png'" />
					</view>
				</view>
			</view>
		</view>
		<view style="height: 200rpx"></view>
		<XlmExpressTabbar :current="1" />
	</scroll-view>
</template>

<script setup>
	import {
		ref,
		computed
	} from 'vue'
	import {
		useOutsideAppStore
	} from '@/store/app'
	import {
		imgUrl
	} from '@/utils/config'
	import XlmExpressTabbar from '@/components/XlmExpressTabbar/index.vue'
	import {
		formatTime,
		formatDateOnly
	} from '@/utils/dateUtils.js'
	import {
		onShow
	} from '@dcloudio/uni-app'
	import {
		useRequest
	} from '@/api'
	const appStore = useOutsideAppStore()
	const navHeight = computed(() => appStore.navHeight)
	const scrollTop = ref(0)
	const onPageScroll = (e) => {
		scrollTop.value = e.detail.scrollTop
	}
	const {
		API_RECORD_INDEX_POST
	} = useRequest()
	// const tabs = ['积分排行榜', '人气排行', '参赛排行']
	const tabs = ref([{
			type: 'ScoreRanking',
			name: '积分排行榜'
		},
		{
			type: 'popularityRanking',
			name: '人气排行'
		},
		{
			type: 'competitionRanking',
			name: '参赛排行'
		}
	])
	const activeTab = ref(0)

	const groups = ref([])
	onShow(() => {
		getRecordRanking()
	})
	const goTab = (tab, idx) => {
		console.log('tab', tab, idx)
		if (tab.type === 'ScoreRanking') {
			uni.navigateTo({
				url: '/pages/ScoreRanking/index?type=' + tab.type,
				fail: (err) => {
					console.error('跳转失败', err)
				}
			})
		} else if (tab.type === 'popularityRanking') {
			uni.navigateTo({
				url: '/pages/popularityRanking/index?type=' + tab.type,
				fail: (err) => {
					console.error('跳转失败', err)
				}
			})
		} else if (tab.type === 'competitionRanking') {
			uni.navigateTo({
				url: '/pages/competitionRanking/index?type=' + tab.type,
				fail: (err) => {
					console.error('跳转失败', err)
				}
			})
		}
	}
	const goEvent = (id) => {
		uni.navigateTo({
			url: '/pages/EventRecords/index?id=' + id,
			fail: (err) => {
				console.error('跳转失败', err)
			}
		})
	}
	const getRecordRanking = async () => {
		let params = {
			page: 1,
			page_size: 10
		}
		groups.value = []
		try {
			const res = await API_RECORD_INDEX_POST(params)
			console.log('getRecordRanking', res)

			if (res.code === 1) {
				if (res.data.data.length > 0) {
					groups.value = res.data.data
				} else {
					groups.value = []
				}
			} else {
				uni.showToast({
					title: res.msg,
					icon: 'none'
				})
			}
			console.log('groups', groups.value)
		} catch (error) {
			uni.showToast({
				title: error.message,
				icon: 'none'
			})
		}
	}
</script>

<style lang="scss" scoped>
	@import './index.scss';
</style>